<template>
    <div class="room-manage">
        <div class="personal-manage-title">
            皮肤包管理
            <div class="out-position-manage-title-button">
                <el-button type="primary" plain size="mini" @click="addOutPosition">新增</el-button>
            </div>
        </div>
        <div class="personal-manage-table-wrapper">
            <el-table
                :data="showList"
                stripe
                border
                style="width: 100%"
                size="small"
                :header-cell-style="headerCellStyle"
            >
                <el-table-column prop="userName" label="序号" width="50">
                    <template slot-scope="scope">{{scope.$index + 1 + 10 * (position - 1)}}</template>
                </el-table-column>
                <el-table-column prop="name" label="皮肤包名称"></el-table-column>
                <el-table-column prop="code" label="编码"></el-table-column>
                <el-table-column prop="type" label="皮肤包类型">
                    <template slot-scope="scope">
                        <div v-show="scope.row.type===1">ktv</div>
                        <div v-show="scope.row.type===2">利云酒吧</div>
                    </template>
                </el-table-column>
                <el-table-column prop="mustUpdate" label="是否强制升级">
                    <template slot-scope="scope">
                        <div v-show="scope.row.mustUpdate===0">不强制</div>
                        <div v-show="scope.row.mustUpdate===1">强制</div>
                    </template>
                </el-table-column>
                <el-table-column prop="createTime" label="添加日期">
                    <template slot-scope="scope">{{$F(scope.row.createTime)}}</template>
                </el-table-column>
                <el-table-column prop="updateTime" label="更新日期">
                    <template slot-scope="scope">{{$F(scope.row.updateTime)}}</template>
                </el-table-column>
                <el-table-column label="操作" width="75">
                    <template slot-scope="scope">
                        <el-button
                            size="mini"
                            :disabled="scope.row.type===1&&scope.row.defaultType===1"
                            @click="editOutPosition(scope.$index, scope.row)"
                            type="primary"
                        >编辑</el-button>
                        <!-- <el-button
                            size="mini"
                            type="danger"
                            @click="checkRemove(scope.$index, scope.row)"
                        >删除</el-button> -->
                    </template>
                </el-table-column>
                <el-table-column type="expand">
                    <template slot-scope="props">
                        <div style="line-height: 18px;font-size: 16px;width: 100%;word-wrap:break-word;white-space: pre-line">
                            <div>更新说明：</div>
                            <div>{{props.row.remark}}</div>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <el-dialog title="新增皮肤包" :visible.sync="dialogFormVisible" width="800px">
            <el-form label-position="right">
                <el-form-item label="皮肤包名称" :label-width="formLabelWidth">
                    <el-input v-model="themeName" autocomplete="off" placeholder="请填写皮肤包名称"></el-input>
                </el-form-item>
                <el-form-item label="皮肤包编码" :label-width="formLabelWidth">
                    <el-input v-model="themeCode" autocomplete="off" placeholder="请填写皮肤包编码"></el-input>
                </el-form-item>
                <el-form-item label="更新说明" :label-width="formLabelWidth">
                    <el-input type="textarea" :rows="4" v-model="remark" autocomplete="off" placeholder="请填写说明"></el-input>
                </el-form-item>
                <el-form-item label="是否强制升级" :label-width="formLabelWidth">
                    <el-radio v-model="mustUpdate" :label="0">不强制</el-radio>
                    <el-radio v-model="mustUpdate" :label="1">强制</el-radio>
                </el-form-item>
                <!-- <el-form-item label="皮肤包类型" :label-width="formLabelWidth">
                    <el-radio v-model="themeType" :label="1">ktv</el-radio>
                    <el-radio v-model="themeType" :label="2">利云酒吧</el-radio>
                </el-form-item> -->
                <el-form-item label="上传皮肤包" :label-width="formLabelWidth">
                    <!-- <div class="down-load-button-in-stock">oss直传测试 -->
                    <el-upload
                        ref="upload"
                        class="upload-demo"
                        action
                        :http-request="fnUploadRequest"
                        :show-file-list="true"
                        :multiple="false"
                        :limit="1"
                    >
                        <el-button
                            size="small"
                            type="primary"
                            @click="$refs.upload.clearFiles()"
                        >点击上传</el-button>
                        <!-- <div slot="tip" class="el-upload__tip">只能上传zip文件</div> -->
                    </el-upload>
                    <!-- </div> -->
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancelDialog" size="small">取 消</el-button>
                <el-button type="primary" @click="okDialog" size="small">确 定</el-button>
            </div>
        </el-dialog>

        <el-dialog title="编辑皮肤包" :visible.sync="dialogFormVisible2" width="800px">
            <el-form label-position="right">
                <el-form-item label="皮肤包名称" :label-width="formLabelWidth">
                    <el-input v-model="themeNameEdit" autocomplete="off" placeholder="请填写皮肤包名称"></el-input>
                </el-form-item>
                <el-form-item label="皮肤包编码" :label-width="formLabelWidth">
                    <el-input v-model="themeCodeEdit" autocomplete="off" placeholder="请填写皮肤包编码"></el-input>
                </el-form-item>
                <el-form-item label="更新说明" :label-width="formLabelWidth">
                    <el-input type="textarea" :rows="4" v-model="remarkEdit" autocomplete="off" placeholder="请填写说明"></el-input>
                </el-form-item>
                <el-form-item label="是否强制升级" :label-width="formLabelWidth">
                    <el-radio v-model="mustUpdateEdit" :label="0">不强制</el-radio>
                    <el-radio v-model="mustUpdateEdit" :label="1">强制</el-radio>
                </el-form-item>
                <!-- <el-form-item label="皮肤包类型" :label-width="formLabelWidth">
                    <el-radio v-model="themeTypeEdit" :label="1">ktv</el-radio>
                    <el-radio v-model="themeTypeEdit" :label="2">利云酒吧</el-radio>
                </el-form-item> -->
                <el-form-item label="上传皮肤包" :label-width="formLabelWidth">
                    <!-- <div class="down-load-button-in-stock">oss直传测试 -->
                    <el-upload
                        ref="upload2"
                        class="upload-demo"
                        action
                        :http-request="fnUploadRequest"
                        :show-file-list="true"
                        :multiple="false"
                        :limit="1"
                    >
                        <el-button
                            size="small"
                            type="primary"
                            @click="$refs.upload2.clearFiles()"
                        >点击上传</el-button>
                        <!-- <div slot="tip" class="el-upload__tip">只能上传zip文件</div> -->
                    </el-upload>
                    <!-- </div> -->
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancelDialog2" size="small">取 消</el-button>
                <el-button type="primary" @click="okDialog2" size="small">确 定</el-button>
            </div>
        </el-dialog>

        <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
            <span>是否确认删除</span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="cancelRemove" size="small">取 消</el-button>
                <el-button type="primary" @click="okRemove" size="small">确 定</el-button>
            </span>
        </el-dialog>

        <div class="pay-set-wrapper-table-block">
            <div class="pay-set-wrapper-table-block-in">
                <el-pagination
                    background
                    :current-page.sync="position"
                    @current-change="handleCurrentChange"
                    :page-size="10"
                    layout="total, prev, pager, next"
                    :total="totalNum"
                ></el-pagination>
            </div>
        </div>
        <div class="page-padding"></div>
    </div>
</template>

<script type="text/ecmascript-6">
// 1、一页20条数据
// 2、勾选框和下拉框和输入框做判断
import OSS from 'ali-oss'
export default {
    data: function () {
        return {
            showList: [], // 展示列表
            totalNum: 0, // 总条数

            formLabelWidth: '120px',

            themeName: '', // 皮肤包名称
            themeCode: '', // 皮肤包code
            remark: '', // 说明
            url: '', // 文件地址
            themeType: 2, // 皮肤包类型
            mustUpdate: 1, // 是否强制升级

            themeId: '', // 正在编辑的apkId
            themeNameEdit: '', // 皮肤包名称（编辑）
            themeCodeEdit: '', // 皮肤包code（编辑）
            remarkEdit: '', // 说明（编辑）
            urlEdit: '', // 文件地址（编辑）
            themeTypeEdit: 2, // 皮肤包类型（编辑）
            mustUpdateEdit: 1, // 是否强制升级（编辑）

            dialogFormVisible: false, // 新增弹框
            dialogFormVisible2: false, // 编辑弹框

            position: 1,
            dialogVisible: false,

            nowRemoveId: ''
        }
    },
    components: {
    },
    mounted () {
        this.cutArray()
    },
    watch: {
        dialogFormVisible () {
            if (this.dialogFormVisible) {
            } else {
                this.cancel(1)
            }
        },
        dialogFormVisible2 () {
            if (this.dialogFormVisible2) {
                } else {
                this.cancel(2)
            }
        },
        position () {
            this.cutArray()
        }
    },
    methods: {
        async getOssParms () {
            console.log()
            let params = {
                params: {}
            }
            let ret = await this.$http
                .get(
                    this.$store.state.IP +
                    '/oss/getAuthorizationInfo?path=skinPackage',
                    params
                )
            return ret.body.data
        },
        async fnUploadRequest (option) {
            try {
                let vm = this
                // 获取OSS配置信息
                let val = await vm.getOssParms()
                let filename = val.path + '/' + Date.parse(new Date()) + '.zip'
                let client = new OSS({
                    region: val.region,
                    accessKeyId: val.accessKeyId,
                    accessKeySecret: val.accessKeySecret,
                    secure: false,
                    bucket: val.bucket,
                    stsToken: val.securityToken
                })
                let file = option.file
                // 分片上传文件
                let ret = await client.multipartUpload(filename, file, {
                    progress: async function (p) {
                        let e = {}
                        e.percent = p * 100
                        option.onProgress(e)
                    }
                })
                if (ret.res.statusCode === 200) {
                    let indexID = ret.res.requestUrls[0].indexOf('?uploadId')
                    if (indexID !== -1) {
                        ret.res.requestUrls[0] = ret.res.requestUrls[0].substring(0, indexID)
                    }
                    console.log(ret.res.requestUrls[0])
                    vm.url = ret.res.requestUrls[0]
                    vm.urlEdit = ret.res.requestUrls[0]
                    option.onSuccess(ret)
                    // return ret
                } else {
                    option.onError('上传失败')
                }
            } catch (error) {
                console.error(error)
                this.disabled = false
                option.onError('上传失败')
                this.$error(error.message)
            }
        },
        cancel (val) {
            if (val === 1) {
                this.themeName = ''
                this.themeCode = ''
                this.remark = ''
                this.url = ''
                this.urlEdit = ''
                this.themeType = 2
                this.mustUpdate = 1
                this.$refs.upload.clearFiles()
            } else {
                this.themeId = ''
                this.themeNameEdit = ''
                this.themeCodeEdit = ''
                this.remarkEdit = ''
                this.url = ''
                this.urlEdit = ''
                this.themeTypeEdit = 2
                this.mustUpdateEdit = 1
                this.$refs.upload2.clearFiles()
            }
        },

        okDialog () {
            let message = ''
            if (this.url === '') {
                message = '请上传皮肤包'
            }
            if (this.remark === '') {
                message = '请输入说明'
            }
            if (this.themeName === '') {
                message = '请输入皮肤包名称'
            }
            if (this.themeCode === '') {
                message = '请输入皮肤包编码'
            }
            if (message !== '') {
                this.$message({
                    showClose: true,
                    message: message,
                    type: 'warning'
                })
                return
            }
            this.dialogFormVisible = false
            this.$http.post(this.$store.state.IP + '/skinPackage/saveOrEdit', {
                name: this.themeName,
                code: this.themeCode,
                remark: this.remark,
                url: this.url,
                type: this.themeType,
                mustUpdate: this.mustUpdate
            },
                {
                    'emulateJSON': false
                }
            ).then(response => {
                console.log('-------------------------------------------')
                response = response.body
                console.log(response)
                if (response.ret === '0') {
                    console.log('调用新增终端版本信息成功')
                    console.log(response.data)
                    this.cutArray()
                    this.$message({
                        showClose: true,
                        message: '新增成功',
                        type: 'success'
                    })
                }
                if (response.ret !== '0') {
                    console.log('调用新增终端版本信息失败')
                }
                console.log('******************************************')
            }, response => {
                console.log('通讯失败')
            })
        },
        cancelDialog () {
            this.dialogFormVisible = false
        },
        addOutPosition () {
            this.dialogFormVisible = true
        },

        toTimeS (date) {
            return date.getFullYear() + '-' + (this.outTen(date.getMonth() + 1)).toString() + '-' + (this.outTen(date.getDate())).toString() + ' ' + (this.outTen(date.getHours())).toString() + ':' + (this.outTen(date.getMinutes())).toString() + ':' + (this.outTen(date.getSeconds())).toString()
        },

        outTen (item) {
            if (item < 10) {
                return '0' + item
            } else {
                return item
            }
        },

        checkRemove (index, row) {
            this.nowRemoveId = row.apkId
            this.dialogVisible = true
        }, // 删除按钮
        okRemove () {
            this.dialogVisible = false
            let params = {
                params: {
                }
            }
            this.$http.get(this.$store.state.IP + '/system/apkPackageManage/delete/' + this.nowRemoveId, params).then(response => {
                console.log('-------------------------------------------')
                console.log('调用删除包管理信息返回')
                response = response.body
                console.log(response)
                if (response.ret === '0') {
                    console.log('调用删除包管理信息成功')
                    this.nowRemoveId = ''
                    this.cutArray()
                    this.$message({
                        showClose: true,
                        message: '删除成功',
                        type: 'success'
                    })
                }
                if (response.ret !== '0') {
                    console.log('调用删除包管理信息失败')
                }
                console.log('******************************************')
            }, response => {
                console.log('通讯失败')
            })
            // 调用删除包厢接口
        }, // 删除确认框确认
        cancelRemove () {
            this.dialogVisible = false
            this.nowRemoveId = ''
        }, // 删除确认框取消

        editOutPosition (index, row) {
            this.themeId = row.id
            this.themeNameEdit = row.name
            this.themeCodeEdit = row.code
            this.remarkEdit = row.remark
            this.urlEdit = row.url
            this.themeTypeEdit = row.type
            this.mustUpdateEdit = row.mustUpdate
            this.dialogFormVisible2 = true
        }, // 编辑按钮
        okDialog2 () {
            let message = ''
            if (this.urlEdit === '') {
                message = '请上传皮肤包'
            }
            if (this.remarkEdit === '') {
                message = '请输入说明'
            }
            if (this.themeNameEdit === '') {
                message = '请输入皮肤包名称'
            }
            if (this.themeCodeEdit === '') {
                message = '请输入皮肤包编码'
            }
            if (message !== '') {
                this.$message({
                    showClose: true,
                    message: message,
                    type: 'warning'
                })
                return
            }
            this.dialogFormVisible2 = false
            // let releaseDate = this.toTimeS(new Date())
            this.$http.post(this.$store.state.IP + '/skinPackage/saveOrEdit', {
                id: this.themeId,
                name: this.themeNameEdit,
                code: this.themeCodeEdit,
                remark: this.remarkEdit,
                url: this.urlEdit,
                type: this.themeTypeEdit,
                mustUpdate: this.mustUpdateEdit
            },
                {
                    'emulateJSON': false
                }
            ).then(response => {
                console.log('-------------------------------------------')
                response = response.body
                console.log(response)
                if (response.ret === '0') {
                    console.log('编辑终端版本信息成功')
                    console.log(response.data)
                    this.cutArray()
                    this.$message({
                        showClose: true,
                        message: '编辑成功',
                        type: 'success'
                    })
                }
                if (response.ret !== '0') {
                    console.log('编辑终端版本信息失败')
                }
                console.log('******************************************')
            }, response => {
                console.log('通讯失败')
            })
        },
        cancelDialog2 () {
            this.dialogFormVisible2 = false
        },

        handleCurrentChange (val) {
            this.position = val
        },
        cutArray () {
            this.getPage()
        },
        getPage () {
            this.$http.post(this.$store.state.IP + '/skinPackage/page', {
                page: this.position - 1, // 页数
                limit: 10 // 一页显示数量
            },
                {
                    'emulateJSON': false
                }
            ).then(response => {
                console.log('-------------------------------------------')
                response = response.body
                console.log(response)
                if (response.ret === '0') {
                    // console.log('调用apk列表成功')
                    console.log(response.data)
                    this.showList = response.res.list
                    this.totalNum = response.res.total
                }
                if (response.ret !== '0') {
                    // console.log('调用apk列表失败')
                }
                console.log('******************************************')
            }, response => {
                console.log('通讯失败')
            })
        }
    }
}
</script>

<style lang="stylus" rel="stylesheet/stylus">
.down-load-button-in-stock
    display: inline-block
    vertical-align: top
    height: 36px
    min-width: 98px
    line-height: 36px
    text-align: center
    cursor: pointer
    overflow: hidden
    position: relative
    -webkit-user-select: none
    -moz-user-select: none
    margin-right: 10px
    border: 1px solid #dcdfe6
    color: #fff
    border-radius: 5px
    background: #66b1ff
    font-size: 14px
    padding: 0 10px

    .down-load-button-in-stock-in
        position: absolute
        left: 0
        top: 0
        width: 100%
        height: 100%
        z-index: 1
        opacity: 0

.room-manage
    width: 100%
    background #fff
    min-height calc(100vh - 65px)

    .personal-manage-title
        width: 100%
        height: 64px
        line-height: 64px
        color: #000
        font-size: 18px
        background #f1f0f5
        position: relative

        .out-position-manage-title-button
            position: absolute
            right: 0
            top: 0

    .personal-manage-button-wrapper
        width: 100%
        height: 60px
        line-height: 60px
        position: relative

        .personal-manage-button-text
            font-weight: 900
            font-size: 18px

        .personal-manage-button
            border-radius: 3px
            height: 40px
            width: 100px
            position: absolute
            right: 0
            top: 10px
            background: #20b2fe
            color: #fff
            text-align: center
            line-height: 40px
            cursor: pointer
            -webkit-user-select: none
            -moz-user-select: none

    .pay-set-wrapper-table-block
        width: 100%
        padding-top: 22px
        height: 50px
        background: #fff
        box-sizing: border-box

        .pay-set-wrapper-table-block-in
            float: right
            padding-right: 17px

    .page-padding
        width: 100%
        height: 20px
        background: #fff

    .personal-manage-table-wrapper
        width: 100%

    .page-all-loading
        position: fixed
        width: 100%
        height: 100%
        left: 0
        top: 0
        z-index: 10000
</style>
